<template>
  <div class="company-auth" ww3 auto>
    <el-page-header @back="goBack" content="企业实名认证"> </el-page-header>
    <el-tag type="warning" style="width: 100%;border-radius:0;border:0;">
      1、验证后企业销售提成为75%（个人为70%），仅支持企业支付宝体现，应监管要求，提现金额需开具发票
    </el-tag>
    <el-tag type="warning" style="width: 100%; margin-bottom: 20px;border-radius:0;border:0;">
      2、验证成功后，验证时所使用的的企业信息不能再用于其他账号验证
    </el-tag>
    <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
      <p>账号信息</p>
    </div>
    <el-divider class="samll-der"></el-divider>
    <el-form inline label-width="134px">
      <div class="form-content">
        <!-- <file-upload></file-upload> -->
        <div>
          <el-form-item label="昵称" required>
            <el-input style="width: 300px;" v-model="user.nickname" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" required>
            <el-input style="width: 300px;" v-model="user.phonenumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="UID" required>
            <el-input style="width: 300px;"  v-model="user.uid" disabled></el-input>
          </el-form-item>
        </div>
        <el-form-item label="头像" required>
          <file-upload :type="'photo'"></file-upload>
        </el-form-item>
      </div>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>授权书</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item label="原创授权书" required>
        <file-upload  :type="'originalAuthorization'" @savefileFun="savefileFun" ref="originalAuthorization"></file-upload>
        <div class="example">下载范本</div>
      </el-form-item>
      <el-form-item label="肖像授权书">
        <file-upload  :type="'portraitAuthorization'" @savefileFun="savefileFun" ref="portraitAuthorization"></file-upload> 
        <div class="example">下载范本</div>
      </el-form-item>
      <el-form-item label="物权授权书">
        <file-upload  :type="'letterOfAuthorization'" @savefileFun="savefileFun" ref="letterOfAuthorization"></file-upload>
        <div class="example">下载范本</div> 
      </el-form-item> 
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>主体信息</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <div>
        <el-form-item label="企业全称" required>
          <el-input style="width: 400px;" v-model="saveData.companyName" placeholder="请输入企业全称"></el-input>
        </el-form-item>
        <el-form-item label="社会统一信用代码" required>
          <el-input style="width: 400px;"  v-model="saveData.succ" placeholder="请输入社会统一信用代码"></el-input>
        </el-form-item>
      </div>
      <div style="font-size:14px;padding-left:134px;margin-bottom:20px">主体名称须与营业执照一致，验证后不可更改</div>
      <div>
        <el-form-item label="注册地" required>
          <el-input style="width: 400px;"  v-model="saveData.domicile" placeholder="请输入注册地"></el-input>
        </el-form-item>
        <el-form-item label="营业期限" required>
          <el-date-picker
            type="date"
            v-model="saveData.businessTerm"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <div class="date-checked">
          <el-checkbox v-model="saveData.longTime">长期</el-checkbox>
        </div>
      </div>
      <div>
        <el-form-item class="special" label="营业执照" required>
          <file-upload  :type="'businessLicense'" @savefileFun="savefileFun"  ref="businessLicense"></file-upload>
          <div class="explain center">请上传最新盖公章的营业执照（副本）复印件图片大小不超过10M</div>
        </el-form-item>
      </div>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">  
        <p>认证资料</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item class="special" label="实名认证声明" required>
        <file-upload  :type="'realName'" @savefileFun="savefileFun"  ref="realName"></file-upload>
        <div class="explain">上传已签署协议照片或扫描件，签署人须与实人认证一致，图片大小不超过10M，所有待填写项必须手写
          <div class="example" style="text-align:left">下载验证声明模板</div>
        </div>
      </el-form-item>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>代表作品</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item class="special" label="代表作视频" required>
        <video-upload :type="'representativeVideo'" @savefileFun="savefileFun"   ref="representativeVideo"/>
        <div class="explain center">请上传您的代表作视频，视频大小不超过100M</div>
      </el-form-item> 
    </el-form>
    <div class="center flex-start">
      <el-checkbox v-model="messageCheck"></el-checkbox>
      <span style="margin-left:6px">确认信息准确无误，提交后不可更改</span>
    </div>
    <div class="center flex-start" style="margin-top: 20px">
      <el-checkbox v-model="tyCheck"></el-checkbox>
      <span style="margin-left:6px">同意</span>
      <span class="agreement">《BUZO作品上传及销售服务协议》</span>
    </div>
    <span class="submit-btn" @click="cmsAuthenticationSave">提交</span>
  </div>
</template>

<script>
import $http from "@/api/info/info"
import $httpLogin from "@/api/login/login"
import FileUpload from "@/components/FileUpload.vue"
import videoUpload from "@/components/videoUpload.vue"
export default {
  components: {
    FileUpload,
    videoUpload
  },
  data() {
    return {
      messageCheck: false,
      tyCheck: false, 
      fileUrl: this.$url.fileUrl,
      type: 'add',
      user: {},
      cmsAuthentication: {},
      saveData: {
        type: "2",
        companyName: "",
        succ: "",
        domicile: "",
        businessTerm: "",
        longTime: "",
        businessLicense: "",
        representativeVideo: "",
        originalAuthorization: "",
        portraitAuthorization: "",
        letterOfAuthorization: "",
        realName: "",
        userId: ""
      },
      data: {
        "userId": '100',
        "type":2,
        "companyName":"",
        "succ":"",
        "domicile":"",
        "businessTerm":"",
        "longTime":"1",
        "businessLicense":"",
        "representativeVideo":"",
        "originalAuthorization":"",
        "portraitAuthorization":"",
        "letterOfAuthorization":"",
        "realName":"",
        "userList":[
          {
            "nickname":"",
            "phone":"",
            "avatar":""
          }
        ]
      }
    }
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user")).sysUser;
    this.cmsAuthentication = JSON.parse(sessionStorage.getItem("user")).cmsAuthentication;
    this.setAuthenticationStatus();
  },
  methods: {
    /**
     * 验证
     * 
     * originalAuthorization 原创授权书
      portraitAuthorization 
     */
    yzInput() {
      debugger;
      if(!this.saveData.originalAuthorization) {
        this.$message.error('请选择原创授权书');
        return false;
      } else if(!this.saveData.portraitAuthorization) {
        this.$message.error('请选择肖像授权书');
        return false;
      }else if(!this.saveData.letterOfAuthorization) {
        this.$message.error('请选择物权授权书');
        return false;
      }else if(!this.saveData.companyName) {
        this.$message.error('企业全称不能为空');
        return false;
      }else if(!this.saveData.succ) {
        this.$message.error('社会统一信用代码不能为空');
        return false;
      }else if(!this.saveData.domicile) {
        this.$message.error('注册地不能为空');
        return false;
      }else if(!this.saveData.businessTerm) {
        this.$message.error('营业期限不能为空');
        return false;
      }else if(!this.saveData.businessLicense) {
        this.$message.error('营业执照不能为空');
        return false;
      }else if(!this.saveData.realName) {
        this.$message.error('实名认证声明不能为空');
        return false;
      }else if(!this.saveData.representativeVideo) {
        this.$message.error('请选择代表作视频');
        return false;
      } else if(!this.messageCheck) {
        this.$message.error('请勾选确认信息准确无误，提交后不可更改');
        return false;
      } else if(!this.tyCheck) { 
        this.$message.error('请勾选同意《BUZO作品上传及销售服务协议》');
        return false;
      }
      return true;
    },
    /**
     * 获取认证新增还是编辑
     */
    setAuthenticationStatus() {
      if(!this.cmsAuthentication) {
        this.type = 'add';
        this.saveData = {
          "userId": '',
          "type":2,
          "companyName":"",
          "succ":"",
          "domicile":"",
          "businessTerm":"",
          "longTime":"1",
          "businessLicense":"",
          "representativeVideo":"",
          "originalAuthorization":"",
          "portraitAuthorization":"",
          "letterOfAuthorization":"",
          "realName":"",
          "userList":[
            {
              "nickname":"",
              "phone":"",
              "avatar":""
            }
          ]
        }
      } else {
        console.log(this.cmsAuthentication);
        this.type = 'update';
        this.saveData = this.cmsAuthentication;

        this.$refs.originalAuthorization.initImg(this.fileUrl + this.cmsAuthentication.originalAuthorization);
        this.$refs.portraitAuthorization.initImg(this.fileUrl + this.cmsAuthentication.portraitAuthorization);
        this.$refs.letterOfAuthorization.initImg(this.fileUrl + this.cmsAuthentication.letterOfAuthorization);
        this.$refs.businessLicense.initImg(this.fileUrl + this.cmsAuthentication.businessLicense);
        this.$refs.realName.initImg(this.fileUrl + this.cmsAuthentication.realName);
        this.$refs.representativeVideo.initImg(this.fileUrl + this.cmsAuthentication.representativeVideo);
      }
    },
     /**
     * 保存文件路径
     */
    savefileFun(data) {
      this.saveData[data.type] = data.fileUrl;
      console.log(this.saveData);
    },
    goBack() {
      this.$router.go(-1)
    },
    /**
     * 获取用户信息
     */
    getUserInfo(phone) {
        let that = this;
        let data = {
            phone: phone
        }
        debugger;
        $httpLogin.getUserInfo(data).then((res) => {
            console.log("获取用户信息",res);
            that.loadingIndex.close();
            if(res.code == 0) {
              sessionStorage.setItem("user", JSON.stringify(res.data));
              that.user = res.data.sysUser;
              that.showModify = false;
              
              that.$message({
                  message: '提交成功',
                  type: 'success'
              });
              that.goBack();
            }
        })
    },
    /**
     * 企业认证保存接口
     */
    cmsAuthenticationSave() {
      let that = this;
      let data = this.saveData;
      data.userId = sessionStorage.getItem("userId");
      data.userList = [
        {
            "nickname": "",
            "phone": "",
            "avatar": ""
        }
      ];
      let yzInput = this.yzInput();
      if(!yzInput) {
        return;
      }
      this.loadingIndex = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      data.longTime =  data.longTime ? 1 : 2;
      let d = new Date(data.businessTerm);
      data.businessTerm = d.format('yyyy-MM-dd');

      if(this.type === 'add') {
        $http.cmsAuthenticationSave(data).then(res => {
          if(res.code == 0) {
            this.getUserInfo(this.user.userId)
          }
        })
      } else {
        debugger;
        $http.cmsAuthenticationUpdate(data).then(res => {
          if(res.code == 0) {
            this.getUserInfo(this.user.userId)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
/* .company-auth >>> .el-form-item__content{
  min-width: 300px;
} */
.date-checked{
  display: inline-flex;
  height: 40px;
  line-height: 40px;
  align-items: center;
  justify-content: flex-start;
}
.submit-btn{
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: var(--green);
  color: var(--footer-color);
  border-radius: 6px;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-start{
  width: 274px;
  justify-content: flex-start;
  margin: 0 auto;
}
.center span{
  font-size: var(--content);
}
.right-msg{
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.right-msg span{
  font-size: var(--content);
}
.agreement{
  color: var(--green);
  cursor: pointer;
}
.step-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 120px;
}
.ID-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.id-item{
  padding: 34px 69px;
  border: 1px dashed #EEEEEE;
  cursor: pointer;
  position: relative;
  margin-right: 110px;
}
.id-icon{
  position: absolute;
  top: 50px;
  left: 120px;
  font-size: 40px;
  color: var(--green);
}
.check-bank .icon {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-right: 4px;
}
.example{
  text-align: center;
  color: var(--green);
  cursor: pointer;
}
.explain{
  padding: 20px;
}
.special >>> .el-form-item__content{
  display: inline-flex;
}
</style>